<template>
	<div>
		<el-button type="info" size="mini" @click="openColumn">列设置</el-button>
		<el-drawer v-model="drawer2">
			<template #title>
				<h4>列设置</h4>
			</template>
			<template #default>
				<el-card class="box-card">
					<div style="width: 100%;height: 30px;background-color: #ddd;">
						<div style="height: 100%;width: 30%;float: left;text-align: left;background-color: #222;">	
							<el-checkbox
								v-model="checkAll"
								:indeterminate="isIndeterminate"
								@change="handleCheckAllChange"
								>Check all</el-checkbox>
						</div>
						<div style="height: 100%;width: 70%;float: right;text-align: right;">	
							232332
						</div>
					</div>
					<div style="width: 100%;height: 400px;background-color: #ddd;">
					<div style="width: 30%;height: 100%;background-color: #233;">
						<el-checkbox-group v-model="checkList">
							<el-checkbox size="large" v-for="item in table.columns" :label="item.label" />
						</el-checkbox-group>
					</div>
						
					</div>
					
					<!-- <el-table ref="multipleTableRef" :data="table" style="width: 100%"
						@selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" />
						<el-table-column property="name" label="Name" width="120" />
					</el-table> -->
				</el-card>
			</template>
			<template #footer>
				<div style="flex: auto">
					<el-button @click="cancelClick" size="mini">取消</el-button>
					<el-button type="primary" @click="confirmClick" ize="mini">确定</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, onMounted, ref, watch } from "vue";
import { ElMessageBox } from "element-plus"

export default defineComponent({
	name: "columnBtn",

	props: {
		modelValue: [Number, String],
		table: Object,
		props: Object
	},

	expose: ["onChange"],

	emits: ["update:modelValue", "change"],

	setup(props, { emit }) {
		// 请求服务
		const service = inject<any>("service");

		// 关键字
		const keyword = ref<string>("");

		// 树形列表
		const list = ref<any[]>([]);

		// 展开值
		const expandedKeys = ref<any[]>([]);

		// el-tree 组件
		const treeRef = ref<any>({});

		const table = ref(props.table)
		console.log(table.value,']]]]]]');
		

		// 绑定值回调
		function onCurrentChange({ id, type, system_type }: any) {
			emit("update:modelValue", id);
			emit("change", { type: type, system_type: system_type });
		}

		// 刷新列表
		function refresh() {
			service.labelSysService.list().then((res: any) => {
				// const _list = res.filter((e: any) => e.type != 2);

				// _list.unshift({
				// 	name: "一级菜单",
				// 	id: null
				// });
				// list.value = _list;
				list.value = res;
			});
		}

		// 过滤节点
		function filterNode(value: string, data: any) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		}

		// 节点名称
		const name = computed(() => {
			const item = list.value.find((e) => e.id == props.modelValue);
			return item ? item.name : "一级标签";
		});

		// 树形列表
		// const treeList = computed(() => deepTree(list.value));

		// 监听关键字过滤
		watch(keyword, (val: string) => {
			treeRef.value.filter(val);
		});

		onMounted(function () {
			refresh();
		});


		const drawer2 = ref(false)

		function cancelClick() {
			drawer2.value = false
		}
		function confirmClick() {
			ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
				.then(() => {
					drawer2.value = false
				})
				.catch(() => {
					// catch error
				})
		}

		function openColumn() {
			drawer2.value = true
		}
		const multipleSelection = ref([])
		const handleSelectionChange = (val: never[]) => {
			multipleSelection.value = val
			console.log(table.value);
			
		}
		
		const checkList = ref(["#"])

		const checkAll = ref(false)
		const isIndeterminate = ref(true)
		let lists: any[] = []
		props.table.columns.forEach((element: { lable: any; }) => {
			console.log(element,"lists");
			// lists.push(element.lable)
		});
		console.log(lists,"lists");
		

		const handleCheckAllChange = (val: boolean) => {
			checkList.value = val ? lists : []
			isIndeterminate.value = false
		}

		return {
			keyword,
			list,
			expandedKeys,
			treeRef,
			name,
			// treeList,
			refresh,
			filterNode,
			onCurrentChange,

			drawer2,
			cancelClick,
			confirmClick,
			openColumn,
			table,
			handleSelectionChange,
			checkList,
			checkAll,
			isIndeterminate,
			handleCheckAllChange
		};
	}
});
</script>

<style lang="scss">
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.box-card {
	// width: 100;
	margin: 10px 20px;
}
</style>
